<template>
  <div class="demo-container">
    <!-- 示例1: 基础虚拟滚动表格 -->
    <section>
      <cfs-table
        :mergeRows="mergeRows"
        :mergeColumns="mergeColumns"
        :max-height="700"
        :data="tableData"
        :summary-method="summaryMethod"
        border
      >
        <cfs-table-col :width="100" type="index" label="序号" />
        <cfs-table-col :width="100" prop="name" label="姓名" />
        <cfs-table-col :width="80" prop="age" label="年龄" />
        <cfs-table-col :width="250" prop="address" label="地址" />
        <cfs-table-col :width="200" prop="email" label="邮箱" />
        <cfs-table-col :width="200" prop="phone" label="电话">
          <template #default="{ row }">
            <span style="color: red">{{ row.phone }}</span>
          </template>
        </cfs-table-col>
        <cfs-table-col :width="150" label="操作" prop="action">
          <template #default="{ row }">
            <button style="margin-right: 12px" @click="handleEdit(row)">
              编辑
            </button>
            <button @click="handleDelete(row)">删除</button>
          </template>
        </cfs-table-col>
      </cfs-table>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CfsTable from './CVirTable/index.vue';
import CfsTableCol from './CVirTable/TableCol.vue';

// 生成大量数据用于虚拟滚动测试
const tableData = ref(
  Array.from({ length: 200 }, (_, index) => ({
    name: `用户`,
    age: index + 1,
    address: `北京市朝阳区某某街道${index + 1}号`,
    email: `user${index + 1}@example.com`,
    phone: `138${String(index).padStart(8, '0')}`,
  }))
);

const columns = [
  {
    prop: 'name',
    label: '姓名',
    width: 100,
  },
  {
    prop: 'age',
    label: '年龄',
    width: 80,
  },
  {
    prop: 'address',
    label: '地址',
    width: 250,
  },
  {
    prop: 'email',
    label: '邮箱',
  },
  {
    prop: 'phone',
    label: '电话',
    width: 200,
  },
  {
    prop: 'action',
    label: '操作',
    width: 150,
  },
];

// 合并行
const mergeRows = ['name', 'age'];

// 合并列
const mergeColumns = (data) => {
  return [
    ['address', 'action'],
    (index) => {
      if (index === 4) {
        return true;
      }
      return false;
    },
  ];
};

const summaryMethod = (p) => {
  return ['合计', '-', '-', '-', '-', '-', '-'];
};

// 操作方法
const handleEdit = (row) => {
  console.log('编辑:', row);
  alert(`编辑: ${row.name}`);
};

const handleDelete = (row) => {
  console.log('删除:', row);
  alert(`删除: ${row.name}`);
};
</script>

<style scoped>
.demo-container {
  padding: 20px;
  margin: 0 auto;
}

h1 {
  font-size: 28px;
  margin-bottom: 30px;
  color: #303133;
}

h2 {
  font-size: 20px;
  margin: 30px 0 15px;
  color: #303133;
}

section {
  margin-bottom: 40px;
}
</style>
